<template>
	<div class="outerFrame">
		<el-row>
			<el-col :span="6">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>部门列表</span>
						<el-button @click="expandTree" class="expandBtn" type="primary" icon="el-icon-s-fold" size="small" style="margin-left: 20px;"></el-button>
					</div>
					<tree ref="departmentTree" :items="departmentList" :defaultExpandAll="treeExpand" :defaultParent="0" @nodeClick="treeClick"></tree>
				</el-card>
			</el-col>
			<el-col :span="18">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>部门详细</span></div>
					<div>
						<div class="card-body-btn operator"><el-button type="primary" icon="el-icon-plus" @click="toSave()" v-hasPermission="'000000200000'">添加</el-button></div>
						<el-table :data="departmentTable" stripe border v-loading="tableLoading" max-height="500">
							<el-table-column prop="name" label="部门名"></el-table-column>
							<el-table-column prop="sort" label="排序"></el-table-column>
							<el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
							<el-table-column label="操作" fixed="right" width="200px">
								<template slot-scope="scope">
									<div class="table-item-btn">
										<el-button size="mini" icon="el-icon-edit" @click="toUpdate(scope.$index, scope.row)" v-hasPermission="'000000200005'">编辑</el-button>
										<el-button size="mini" type="danger" icon="el-icon-delete" @click="remove(scope.$index, scope.row)" v-hasPermission="'000000200010'">
											删除
										</el-button>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<editDialog :parameter="editParameter" :isDisplay.sync="editDisplay"></editDialog>
	</div>
</template>
<script>
import utils from 'util/utils.js';
import tree from 'components/tree/tree.vue';
import api from 'api/system/department/department.js';
import editDialog from './edit.vue';
export default {
	name: 'department',
	components: {
		editDialog,
		tree
	},
	data() {
		return {
			treeExpand: true,
			departmentList: [],
			currentNode: {},
			departmentTable: [],
			tableLoading: true,
			request: utils.newRequest(),
			editDisplay: false,
			editParameter: {}
		};
	},
	methods: {
		expandTree() {
			this.treeExpand = !this.treeExpand;
			//控制el-tree展开收起
			for (var i = 0; i < this.$refs.departmentTree.getTree().store._getAllNodes().length; i++) {
				this.$refs.departmentTree.getTree().store._getAllNodes()[i].expanded = this.treeExpand;
			}
		},
		//点击部门
		treeClick(data) {
			if (this.currentNode == data) {
				this.currentNode = {};
				$('.el-tree-node').removeClass('is-current');
			} else {
				this.currentNode = data;
			}
			this.freshTable();
		},
		list() {
			api.list(null, response => {
				this.departmentList = response.data;
				this.freshTable();
			});
		},
		freshTable() {
			this.tableLoading = true;
			this.departmentTable = [];
			if (this.currentNode.id) {
				for (var d of this.departmentList) {
					if (d.pid == this.currentNode.id) {
						this.departmentTable.push(d);
					}
				}
			} else {
				for (var d of this.departmentList) {
					//跟节点
					if (d.pid == 0) {
						this.departmentTable.push(d);
					}
				}
			}
			this.tableLoading = false;
		},
		//去添加
		toSave() {
			this.editDisplay = true;
			this.editParameter = {
				pid: this.currentNode.id != undefined ? this.currentNode.id : 0,
				level: this.currentNode.level != undefined ? this.currentNode.level + 1 : 0
			};
		},
		//删除
		remove(index, row) {
			this.request.param.id = row.id;
			utils.confirm('确定删除吗？', '提示', () => {
				api.remove(
					this.request,
					response => {
						utils.msg.success(response.msg);
						this.list();
					},
					response => {
						utils.msg.warning(response.msg);
					}
				);
			});
		},
		//去编辑
		toUpdate(index, row) {
			this.editDisplay = true;
			this.editParameter = {
				id: row.id
			};
		}
	},

	mounted() {
		this.list();
	}
};
</script>

<style lang="scss" scoped="scoped">
@import '~common/custom/css/common.scss';
@import '~common/custom/css/department/list.scss';
</style>
